﻿@{
    ViewData["Title"] = "MenuIndex";
}
<div class="layui-row layui-col-space10">
    <div class="layui-card" id="headsearch">
        <div class="layui-card-body" style="padding: 0px;">
            <form class="layui-form" action="javascript:;" id="queryform">


                @*
                <div class="layui-form-item">
                <input type="hidden" name="OrderId" value="@ViewBag.OrderId" />
                <input type="hidden" name="UserId" value="@ViewBag.UserId" />
                <div class="layui-inline">
                <label class="layui-form-mid">发票状态</label>
                <div class="layui-input-inline" style="width: 100px;">
                <select name="InvoiceState" id="InvoiceState">
                <option value="">--请选择--</option>
                @foreach (int val in Enum.GetValues(typeof(InvoiceState)))
                {
                <option value="@(val)">@(((InvoiceState)val).ToString())</option>
                }
                </select>
                </div>
                </div>
                <div class="layui-inline">
                <label class="layui-form-mid">时间</label>
                <div class="layui-input-inline">
                <input class="layui-input" name="StartDate" id="StartDate" placeholder="开始时间">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                <input class="layui-input" name="EndDate" id="EndDate" placeholder="结束时间">
                </div>
                </div>

                *@
                <div class="layui-inline">
                    <label class="layui-form-mid">区域类型</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <select name="Area" id="Area">
                            <option value="" selected>--请选择--</option>
                            @foreach (var area in @ViewBag.Areas)
                            {
                                <option value="@area">@area</option>
                            }
                            @* <option value="Admin">Admin</option>
                            <option value="API">API</option>*@
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-mid">关键词</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" id="KeyWords" name="KeyWords" placeholder="输入关键词模糊查询" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <div id="search" class="layui-btn layui-btn-md  submitbtn" data-type="search" lay-submit lay-filter="search"> <i class="layui-icon layui-icon-search"></i>查找</div>
                    @*<div id="reset" type="reset" class="layui-btn layui-btn-md"><i class="layui-icon layui-icon-refresh"></i>重置</div>*@
                    <button id="reset" type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh">重置</i></button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 0px;">
            <table id="listData" class="layui-hide" lay-filter="listData"></table>
        </div>
    </div>
</div>

@*toolbar*@
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-primary layui-btn-md" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
    <a class="layui-btn layui-btn-danger layui-btn-md" lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>删除</a>
    <a class="layui-btn layui-btn-success layui-btn-md" lay-event="expandAll"><i class="layui-icon layui-icon-spread-left"></i>展开</a>
    <a class="layui-btn layui-btn-success layui-btn-md" lay-event="foldAll"><i class="layui-icon layui-icon-shrink-right"></i>折叠</a>
</script>

@*tablebar*@
<script type="text/html" id="tablebar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="setMenuPermission"><i class="layui-icon layui-icon-auz"></i></a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="save"><i class="layui-icon layui-icon-face-smile"></i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多<i class="layui-icon layui-icon-down"></i></a>
</script>
@*tpl_MenuType*@
<script type="text/html" id="tpl_MenuType">
    {{#if (d.MenuType == '0') { }}
    <span>目录</span>
    {{# }else if(d.MenuType == 1){ }}
    <span>菜单</span>
    {{# }else if(d.MenuType == 2){ }}
    <span>API</span>
    {{# }else if(d.MenuType == 3){ }}
    <span>功能方法</span>
    {{# } }}
</script>

<script type="text/html" id="tpl_IsEnable">
    <input type="checkbox" name="IsEnable" objid="{{d.Id}}" lay-skin="switch" title="启用|禁用" lay-filter="IsEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>
<script type="text/html" id="tpl_IsExpand">
    <input type="checkbox" name="IsExpand" objid="{{d.Id}}" lay-skin="switch" title="启用|禁用" lay-filter="IsExpand" {{ d.IsExpand ? 'checked' : '' }}>
</script>
<script type="text/html" id="tpl_IsShow">
    <input type="checkbox" name="IsShow" objid="{{d.Id}}" lay-skin="switch" title="启用|禁用" lay-filter="IsShow" {{ d.IsShow ? 'checked' : '' }}>
</script>
<script type="text/html" id="tpl_IsDisuse">
    {{# if(d.IsDisuse==true){ }}
    已废止
    {{# }else { }}
    -
    {{# } }}
</script>
<script type="text/html" id="tpl_IsSystem">
    {{# if(d.IsSystem==true){ }}
    系统菜单
    {{# }else { }}
    -
    {{# } }}
</script>
<script type="text/html" id="tpl_Icon">
    <i class="layui-icon {{d.Icon}}"></i>
</script>
<script type="text/html" id="tpl_Name">
    {{# if(d.MenuType==0) { }}

    {{# } else if(d.MenuType==1) { }}
    <i class="layui-icon layui-icon-website"></i>
    {{# } else if(d.MenuType==2) { }}
    {{# } else if(d.MenuType==3) { }}
    <i class="layui-icon layui-icon-rate-solid"></i>
    {{# } }}
    {{d.Name}}
</script>

@*<script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>*@
@*<script src="~/lib/layuiplug/treetable/treeTable.js" merge="true"></script>*@
@section Scripts{
    <script>
        layui.use(['layer', 'util', 'table', 'form', 'jquery', 'treeTable', 'dropdown', 'popup'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let dropdown = layui.dropdown;
            let treeTable = layui.treeTable;
            let popup = layui.popup;
            //let treetable = layui.treetable;
            abc.indexInit();
            var cols = [[
                { type: 'checkbox' },
                { field: 'Id', width: 50, title: 'ID' },
                { field: 'MenuType', width: 80, title: '菜单类型', templet: '#tpl_MenuType' },
                { field: 'Name', width: 260, title: '权限名称', templet: '#tpl_Name' },
                { field: 'Code', width: 250, title: '菜单ID', edit: 'text' },
                { field: 'PCode', width: 150, title: '上级', edit: 'text', hide: true },

                { field: 'Url', minWidth: 150, title: '地址', edit: 'text' },
                { field: 'Icon', title: '图标', templet: '#tpl_Icon', width: 40, edit: 'text', hide: true },
                { field: 'PermissionStr', minWidth: 200, title: '菜单权限', hide: true },
                { field: 'IsEnable', title: '是否可用', templet: '#tpl_IsEnable', width: 95 },
                { field: 'IsExpand', title: '是否展开菜单', templet: '#tpl_IsExpand', width: 105, hide: true },
                { field: 'IsShow', title: ' 是否显示菜单', templet: '#tpl_IsShow', width: 105, hide: true },
                { field: 'IsDisuse', title: '是否废止', templet: '#tpl_IsDisuse', width: 95, hide: true },
                { field: 'IsSystem', title: ' 是否系统菜单', templet: '#tpl_IsSystem', width: 105, hide: true },

                { field: 'Sort', title: '排序', width: 60, edit: 'text', hide: true },
                { field: 'Remark', title: '备注', edit: 'text' },
                { title: '操作', toolbar: '#tablebar', width: 230 }
            ]];

            //table加载渲染完成
            tableDone_menu = function (res, curr, count) {
                
            }
            
            treetable_menu = abc.treeTableRender("listData", cols, {
                url: '@(Url.Action("GetList"))',
                toolbar: '#toolbar',
                //reqData: search,
                tree: { customName: { id: 'Code', pid: 'PCode', name: 'Name', isParent: true } },
                done: tableDone_menu
            });


            //提交搜索
            form.on('submit(search)', function (obj) {
                abc.treeTableSearch('listData', '@(Url.Action("GetList"))', obj.field, { method: "post", done: window.tableDone });
                return false;
            });
            $("#search").click();//初始化完成后 搜索一次
            var editrowids = "";//编辑了的行ID
            //监听单元格编辑
            treeTable.on('edit(listData)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                //layer.msg('[ID: ' + data.Id + '] ' + field + ' 字段更改为：' + value);

                //遍历对象属性
                for (var datafield in data) {
                    if (field === datafield) {
                        if (editrowids.indexOf(data.Id) == -1) {
                            editrowids += "," + data.Id;//把此列标记为已修改
                        }
                        console.dir(datafield);//输出姓名
                        console.dir(data[datafield]);//输出分数
                    }

                }
            });
            //监听头工具栏事件
            treeTable.on('toolbar(listData)', function (obj) {
                if (obj.event === 'add') {
                    abc.open({ title: '新增', url: '@(Url.Action("Info"))', area: ['100%', '98%'], end: refresh_menu });
                } else if (obj.event === 'refresh') {
                    refresh_menu();
                } else if (obj.event === 'batchRemove') {
                    var data = treetable_menu.checkStatus();
                    if (data.length === 0) {
                        layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    //获取选中的ID
                    let ids = abc.getSelectDataIds(treetable_menu, 'listData');
                    abc.delete({ url: "@(Url.Action("Delete"))", data: { ids: ids }, success: function () { refresh_menu() } });
                } else if (obj.event === 'expandAll') {
                    treeTable.expandAll('listData', true);
                }
                else if (obj.event === 'foldAll') {
                    treeTable.expandAll('listData', false);
                }
            });
            //监听table行事件
            treeTable.on('tool(' + treetable_menu.config.id + ')', function (obj) {
                if (obj.event === 'delete') {
                    abc.delete({ url: "@(Url.Action("Delete"))", data: { ids: obj.data.Id }, success: function () { obj.del(); refresh_menu() } });
                } else if (obj.event === 'edit') {
                    edit_menu(obj);
                } else if (obj.event === 'setMenuPermission') {
                    //, end: refresh_menu
                    abc.open({ title: '设置菜单权限 - ' + obj.data.Name, url: '@(Url.Action("Index", "Permission"))?menuid=' + obj.data.Id, area: ['80%', '80%'] });
                } else if (obj.event === 'save') {
                    if (editrowids.indexOf(obj.data.Id) == -1) {
                        popup.failure("请先修改后再保存")
                    }
                    else {
                        popup.success("保存成功消息")
                    }
                } else if (obj.event === 'more') {
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [
                            { title: '导出信息', id: 'export' },
                            { title: '下载文件', id: 'downfile' },
                            { title: '查看详情', id: 'edit' }
                        ]
                        , click: function (menudata) {
                            layer.tips('点击了：' + menudata.title, this.elem, { tips: [1, '#5FB878'] })
                            if (menudata.id === 'export') {
                                layer.tips('export：' + obj.data.Id, this.elem, { tips: [1, '#5FB878'] })
                            } else if (menudata.id === 'downfile') {
                            } if (menudata.id === 'edit') {
                            }

                        }
                    });
                }
            })

            //刷新
            refresh_menu = function () {
                //table.reload("listData");
                treetable_menu.reload();
            };
            //IsEanble 开关事件
            form.on('switch(IsEnable)', function (obj) {
                abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked, type: 'isenable' } });
            });
            //IsExpand 开关事件
            form.on('switch(IsExpand)', function (obj) {
                abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked, type: 'isexpand' } });
            });
            //IsShow 开关事件
            form.on('switch(IsShow)', function (obj) {
                abc.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state: obj.elem.checked, type: 'isshow' } });
            });

            //table 行双击事件
            treeTable.on('rowDouble(listData)', function (obj) { edit_menu(obj); });
            //table 行中的事件监听
            //编辑
            edit_menu = function (obj) {
                //, end: refresh_menu
                abc.open({ title: '编辑', url: '@(Url.Action("Info"))/' + obj.data.Id, area: ['100%', '98%'] });
            }

        })
    </script>
}

@* callback 回调函数
    popup.success("成功消息",callback)
    popup.failure("失败消息",callback)
    popup.warning("警告消息",callback)*@
